<template>
	<div class="vue-admin-beautiful-wrapper" :class="classObj">
		<!--横向布局-->
		<div v-if="'horizontal' === layout" class="layout-container-horizontal"
			:class="{fixed: header === 'fixed','no-tabs-bar': tabsBar === 'false' || tabsBar === false}">
			<div :class="header === 'fixed' ? 'fixed-header' : ''">
				<vab-top-bar />
				<div v-if="tabsBar === 'true' || tabsBar === true" :class="{ 'tag-view-show': tabsBar }">
					<div class="vab-main">
						<vab-tabs-bar ref="vartabsbar" />
					</div>
				</div>
			</div>
			<div class="vab-main main-padding">
				<vab-ad />
				<vab-app-main />
			</div>
		</div>
		<!--纵向布局-->
		<div v-else class="layout-container-vertical"
			:class="{fixed: header === 'fixed','no-tabs-bar': tabsBar === 'false' || tabsBar === false}">
			<!--手机右边的空白处,点击关闭-->
			<div v-if="device === 'mobile' && collapse === false" class="mask" @click="handleFoldSideBar" />
			<vab-side-bar />
			<div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
				<div :class="header === 'fixed' ? 'fixed-header' : ''">
					<vab-nav-bar ref="vab-nav-bar" />
					<vab-tabs-bar ref="vartabsbar2" v-if="tabsBar === 'true' || tabsBar === true" />
				</div>
				<vab-ad />
				<vab-app-main />
			</div>
		</div>
		<el-backtop />

		<div v-dialogDrag class="el-dialog__wrapper el-dialogMain" style="z-index: 3000;" v-show="process.visible">
			<div class="el-dialog el-dialogMain" style="left: 0px;top: 0px;width:400px;">
				<div class="el-dialog__header" style="cursor: move;"><span class="el-dialog__title">导入进度</span>
					<button type="button" aria-label="Close" class="el-dialog__headerbtn"
						@click="process.visible=false">
						<i class="el-dialog__close el-icon el-icon-close"></i>
					</button>
				</div>
				<div class="el-dialog__body">
					<el-progress :text-inside="true" :stroke-width="24" :percentage="process.percent" status="success">
					</el-progress>
					<span v-html="process.msg"></span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import VabAd from "@/pages/common/mainpartial/vabAd.vue";
	import VabAppMain from "@/pages/common/mainpartial/VabAppMain.vue";
	import VabAvatar from "@/pages/common/mainpartial/VabAvatar.vue";
	import VabBreadcrumb from "@/pages/common/mainpartial/VabBreadcrumb.vue";
	import VabLogo from "@/pages/common/mainpartial/VabLogo.vue";
	import VabNavBar from "@/pages/common/mainpartial/VabNavBar.vue";
	import VabThemeBar from "@/pages/common/mainpartial/VabThemeBar.vue";
	import VabTopBar from "@/pages/common/zxlayout/VabTopBar.vue"; /* 顶部菜单*/
	import VabTabsBar from "@/pages/common/zxlayout/VabTabsBar.vue";
	import VabSideBar from "@/pages/common/zxlayout/VabSideBar.vue";
	import common from "@/common/common.js";
	import webSocket from "@/common/webSocket.js";

	export default {
		mixins: [],
		components: {
			VabAd,
			VabAppMain,
			VabAvatar,
			VabBreadcrumb,
			VabLogo,
			VabNavBar,
			VabThemeBar,
			VabTopBar,
			VabTabsBar,
			VabSideBar,
		},
		created() {
			//console.log("main");
			window.appMain = this;
			webSocket.start();
		},
		name: "Layout",
		data() {
			return {
				oldLayout: "",
				process: {
					visible: false,
					msg: "",
					percent: 0
				}
			};
		},
		computed: {
			name() {
				return this.$store.state.theme.name;
			},
			layout() {
				return this.$store.state.theme.layout;
			},
			header() {
				return this.$store.state.theme.header;
			},
			tabsBar() {
				return this.$store.state.theme.tabsBar;
			},
			themeBar() {
				return this.$store.state.theme.themeBar;
			},
			classObj() {
				return {
					mobile: this.device === "mobile",
				};
			},
			collapse() {
				return this.$store.state.settings.collapse;
			},
			device() {
				return this.$store.state.settings.device;
			},
			lan() {
				var lang = this.$store.state.language;
				var path = "main";
				var r = lang[path];
				if (r == null) return {};
				return r;
			}
		},
		beforeMount() {
			window.addEventListener("resize", this.handleResize);
		},
		beforeDestroy() {
			window.removeEventListener("resize", this.handleResize);
		},
		mounted() {
			this.oldLayout = this.layout;
			const userAgent = navigator.userAgent;
			if (userAgent.includes("Juejin")) {
				this.$message(this.lan.browserNot);
			}
			const isMobile = this.handleIsMobile();
			if (isMobile) {
				if (isMobile) {
					//横向布局时如果是手机端访问那么改成纵向版
					this.$store.dispatch(
						"setTheme",
						Object.assign(this.$store.state.theme, {
							layout: "vertical"
						})
					);
				} else {
					this.$store.dispatch(
						"setTheme",
						Object.assign(this.$store.state.theme, {
							layout: this.oldLayout
						})
					);
				}
				let settings = Object.assign(this.$store.state.settings, {
					device: "mobile"
				});
				this.$store.dispatch(
					"setSettings",
					settings
				);
				setTimeout(() => {
					this.$store.dispatch("foldSideBar");
				}, 100);
			} else {
				this.$store.dispatch("openSideBar");
			}
			// this.$nextTick(() => {
			//   window.addEventListener(
			//     "storage",
			//     (e) => {
			//       if (e.key === tokenName || e.key === null) window.location.reload();
			//       if (e.key === tokenName && e.value === null) window.location.reload();
			//     },
			//     false
			//   );
			// });
		},
		methods: {
			handleFoldSideBar() {
				this.$store.dispatch("foldSideBar");
			},
			handleIsMobile() {
				return common.tool.handleIsMobile();
			},
			handleResize() {
				if (!document.hidden) {
					const isMobile = this.handleIsMobile();
					if (isMobile) {
						//横向布局时如果是手机端访问那么改成纵向版
						this.$store.dispatch(
							"setTheme",
							Object.assign(this.$store.state.theme, {
								layout: "vertical"
							})
						);
					} else {
						this.$store.dispatch(
							"setTheme",
							Object.assign(this.$store.state.theme, {
								layout: this.oldLayout
							})
						);
					}
					this.$store.dispatch(
						"setSettings",
						Object.assign(this.$store.state.settings, {
							device: isMobile ? "mobile" : "desktop",
						})
					);
				}
			},

			showProcess(msg, percent) {
				this.process.visible = true;
				this.process.percent = percent;
				this.process.msg = msg;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.el-dialogMain {
		position: fixed;
		width: 0px;
	}

	@import "@/css/variables.scss";

	@mixin fix-header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: $base-z-index - 2;
		width: 100%;
		overflow: hidden;
	}

	.vue-admin-beautiful-wrapper {
		position: relative;
		width: 100%;
		height: 100%;

		.layout-container-horizontal {
			position: relative;

			&.fixed {
				padding-top: calc(#{$base-top-bar-height} + #{$base-tabs-bar-height});
			}

			&.fixed.no-tabs-bar {
				padding-top: $base-top-bar-height;
			}

			::v-deep {
				.vab-main {
					width: 95%;
					margin: auto;
				}

				.fixed-header {
					@include fix-header;
				}

				.tag-view-show {
					background: $base-color-white;
					box-shadow: $base-box-shadow;
					// opacity: .9;
				}

				.nav-bar-container {
					.fold-unfold {
						display: none;
					}
				}

				.main-padding {
					.app-main-container {
						margin-top: $base-padding;
						margin-bottom: $base-padding;
						background: $base-color-white;
						background: rgba(255, 255, 255, 0.5);
						// opacity: .9;
					}
				}
			}
		}

		.layout-container-vertical {
			position: relative;

			.mask {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: $base-z-index - 1;
				width: 100%;
				height: 100vh;
				overflow: hidden;
				background: #000;
				opacity: 0.5;
			}

			&.fixed {
				padding-top: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
			}

			&.fixed.no-tabs-bar {
				padding-top: $base-nav-bar-height;
			}

			.vab-main {
				position: relative;
				min-height: 100%;
				margin-left: $base-left-menu-width;
				background: #f6f8f9;
				transition: $base-transition;

				::v-deep {
					.fixed-header {
						@include fix-header;

						left: $base-left-menu-width;
						width: $base-right-content-width;
						box-shadow: $base-box-shadow;
						transition: $base-transition;
					}

					.nav-bar-container {
						position: relative;
						box-sizing: border-box;
					}

					.tabs-bar-container {
						box-sizing: border-box;
					}

					.app-main-container {
						width: calc(100% - #{$base-padding} - #{$base-padding});
						margin: $base-padding auto;
						background: $base-color-white;
						border-radius: $base-border-radius;
					}
				}

				&.is-collapse-main {
					margin-left: $base-left-menu-width-min;

					::v-deep {
						.fixed-header {
							left: $base-left-menu-width-min;
							width: calc(100% - 65px);
						}
					}
				}
			}
		}

		/* 手机端开始 */
		&.mobile {
			::v-deep {

				.el-pager,
				.el-pagination__jump {
					display: none;
				}

				.layout-container-vertical {
					.el-scrollbar.side-bar-container.is-collapse {
						width: 0;
					}

					.vab-main {
						width: 100%;
						margin-left: 0;
					}
				}

				.vab-main {
					.fixed-header {
						left: 0 !important;
						width: 100% !important;
					}
				}
			}
		}

		/* 手机端结束 */
	}
</style>
